import { Component, ViewChild } from '@angular/core';
import { ICellEditorAngularComp } from '@ag-grid-community/angular';
import { ApesInputNumberComponent } from '@shared/apes/input-number/apes-input-number.component';
import { ExpressionService } from '@core/services/expression/ExpressionService';

@Component({
  selector: 'apes-cell-input-number',
  template: `
    <apes-input-number [ngStyle]="{width:'100%'}" (keydown)="onKeyDown($event)" #input
                       [(ngModel)]="inputValue" [apesMin]="min" [apesMax]="max" [apesStep]="1"
                       [apesShowBtn]="false"
                       [apesDisabled]="cellDisabled"
                       (mouseout)="onMouseout($event)"
                       [apesPlaceHolder]="placeHolder" [apesPrecision]="precision">
    </apes-input-number>
  `,
  styles: [],
})
export class EditorInputNumberComponent implements ICellEditorAngularComp {

  inputValue: any;
  params: any;
  ctx: any;
  data: any;
  precision: number;
  placeHolder: any = '';
  cellDisabled = false;
  min: number = -Infinity;
  max: number = Infinity;
  @ViewChild(ApesInputNumberComponent, { static: true })
  input: ApesInputNumberComponent;

  constructor(private expressionService: ExpressionService) {
  }

  agInit(params: any): void {
    this.params = params;
    this.ctx = params.context;
    if (this.params.hasOwnProperty('colDef')) {
      this.placeHolder = this.params.colDef.placeHolder ? this.params.colDef.placeHolder : '';
      this.min = this.params.colDef.min ? this.params.colDef.min : -Infinity;
      this.max = this.params.colDef.max ? this.params.colDef.max : Infinity;
      this.data = this.params.data;
      if (this.params.colDef.hasOwnProperty('cellEditorDisabled')) {
        this.cellDisabled = this.expressionService.eval(this.params.colDef.cellEditorDisabled, {
          context: this.ctx,
          form: this.ctx.form,
          model: this.ctx.model,
          data: this.data,
        });
      }
    } else {
      this.placeHolder = this.params['column']['colDef'].placeHolder ? this.params['column']['colDef'].placeHolder : '';
      this.min = this.params['column']['colDef'].min ? this.params['column']['colDef'].min : -Infinity;
      this.max = this.params['column']['colDef'].max ? this.params['column']['colDef'].max : Infinity;
    }
    this.inputValue = params.value;
    this.ctx = params.context;
    this.precision = params.column.colDef.precision ? Number(params.column.colDef.precision) : 2;

  }

  extend(data: any) {
    let result = {};
    for (let key in data) {
      let value = data[key];
      if (key === 'context') {
        result['ctx'] = value;
      } else {
        result[key] = value;
      }
    }
    return result;
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.input.focus();
    });
  }

  isPopup(): boolean {
    return false;
  }

  getValue(): any {
    this.input.blur();
    let result;
    if (!this.inputValue) {
      result = 0;
      this.params.value = 0;
    } else {
      result = this.inputValue;
      this.params.value = this.inputValue;
    }
    return result;
  }

  // refresh(params: any): boolean {
  //     return undefined;
  // }

  onKeyDown(event): void {
    let key = event.which || event.keyCode;
    if (key === 38 || key === 40) {
      this.preventDefaultAndPropagation(event);
    } else if (key == 13 || key == 9) { // enter
      // in a proper application you'd probably want to inform the user that an input is blank'
      /**/
      this.inputValue = event.target.value;
      this.params.value = event.target.value;
    }
  }

  onMouseout(param) {
    console.log('cellMouseout--');
    console.log(this.ctx.grid.formState.gridCellEditorStopped);
    this.input.blur();
    //this.inputValue = param;
    this.params.value = this.inputValue;
    // if (this.ctx.grid.formState.hasOwnProperty('gridCellEditorStopped') && !this.ctx.grid.formState.gridCellEditorStopped) {
    //   console.log('cellStopEditing--');
    this.params.stopEditing(false);
    // }
  }

  private preventDefaultAndPropagation(event) {
    event.preventDefault();
    event.stopPropagation();
  }
}
